import {
  Divider,
  Table,
  Switch,
  Button,
  Space,
  Pagination,
  Modal,
  Form,
  Input,
  Select,
  Upload,
  message 
} from "antd";
import { useState, useEffect, useRef } from "react";
import "./index.scss";
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { updateMemberInfo2 } from "../../../utils/updateMemberInfo2";
import { getMemberInfo } from "../../../utils/getMemberInfo";

const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
};
const Student = () => {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState('');
  const [myData, setMyData] = useState({});
  const [flag,setFlag]=useState(false)
  const [form] = Form.useForm();
  const [datalist,setDataList]=useState([])
 
  const handleChange = (info) => {
    const isJpgOrPng =
      info.file.type === "image/jpeg" ||
      info.file.type === "image/png" ||
      info.file.type === "image/jpg";
    if (!isJpgOrPng) {
      return message.error("图片后缀格式不对");
    }
    const isLt2M = info.file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      return message.error("最大只能上传2m的图片");
    } // 将文件对象转换格式
    getBase64(info.file.originFileObj, (url) => {
      setImageUrl(url);
    });
  };
  const updateMember2=(data)=>{
    console.log(data);
    updateMemberInfo2(data)
    .then((res) => {
      console.log(res.data, "赖总");
      getMember()

    })
    .catch((err) => {
      console.log(err, "err");
    });
  }
  
 
  useEffect(() => {
    const data = JSON.parse(sessionStorage.getItem('userInfo'));
    if(data[0].user_type==1){
        data[0].user_type='管理员'
    }
    else if(data[0].user_type==2){
      data[0].user_type='成员'

    }
    else if(data[0].user_type==3){
      data[0].user_type='管理员'

    }
    console.log(data,'lll');
    if (data && data.length > 0) {
      getMemberInfo()
      .then((res) => {
        console.log(res.data, "res");
        console.log(myData,'ddd');
        let ob=res.data.filter(item=>item.user_id==data[0].user_id)
        console.log(ob,'ob');
        // const list = res.data.map((item) => ({ ...item, key: item.user_id }));
        // console.log(list, "list");
        setMyData(ob[0]);
        setImageUrl(ob[0].user_img)
        form.setFieldsValue(ob[0]); // 手动设置表单项的默认值
      })
      .catch((err) => {
        console.log(err, "err");
      });
     
    }
  }, [form]);
   const onFinish = (values) => {
    console.log("Success:", values);
    console.log(datalist,'datalist');
    let op=[]
    op.push(values)
    let listData=op.map((item) => ({ ...item, user_id: myData.user_id }))
   console.log(listData,'listData');
    updateMember2(listData)

     message.success({
      type: 'success',
      content: '设置成功!'
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);

  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}{" "}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload{" "}
      </div>{" "}
    </div>
  );

  return (
    <div>
      <h1>账户设置</h1>
      <Divider />
      <Form
        className="form"
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        form={form} // 将 form 对象传递给表单组件
      >
        <Form.Item
          style={{marginLeft:"330px"}}
          name="user_img"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <div>
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76" // beforeUpload={beforeUpload}
            onChange={handleChange}
          >
            {" "}
            {imageUrl ? (
              <img
                src={imageUrl}
                alt="avatar"
                style={{
                  width: "100%",
                  height:'100%'
                }}
              />
            ) : (
              uploadButton
            )}
            {" "}
          </Upload>
          <span onChange={handleChange} style={{marginLeft:'20px',color:'#0099ff'}}>上传头像</span>
          </div>
        </Form.Item>
        <Form.Item
          label="账户"
          name="user_email"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input style={{ height: "50px" }} />
        </Form.Item>
        <Form.Item
          label="角色"
          name="user_type"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input style={{ height: "50px" }} disabled/>
        </Form.Item>
        <Form.Item
          label="姓名"
          name="user_name"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input style={{ height: "50px" }} />
        </Form.Item>
        <Form.Item
          label="邮箱"
          name="user_email"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input style={{ height: "50px" }}  />
        </Form.Item>
        <Form.Item
          label="手机号"
          name="user_phone"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input style={{ height: "50px" }} />
        </Form.Item>
        <Form.Item
          label="旧密码"
          name="user_pwd"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Input.Password style={{ height: "50px" }} />
        </Form.Item>
        <Form.Item
          label="新密码"
          name="user_newPwd"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Input.Password style={{ height: "50px" }} />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="user_checkPwd"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Input.Password style={{ height: "50px" }} />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button
            type="primary"
            htmlType="submit"
            style={{ marginLeft: "150px" }}
          >
            提交
          </Button>
        </Form.Item>
      </Form>
      <div style={{ height: "50px" }}></div>
    </div>
  );
};

export default Student;
